<template>
  <div class="node-drawer-wrapper">
    <div class="drawer-block">
      <div class="title-line">趋势分析</div>
      <div class="content summary-info">
        <div>
          <div>累计进入</div>
          <div>{{ dialogData.enterCount }}</div>
        </div>
        <div>
          <div>累计触达</div>
          <div>{{ dialogData.reachCount }}</div>
        </div>
      </div>
      <div class="content line-graph" id="line-graph" style="height: 376px"></div>
    </div>
    <div class="drawer-block">
      <div class="title-line">
        <div class="title">
          数据详情
        </div>
        <div class="export">
          <el-button @click="handleExport">导出</el-button>
        </div>
      </div>
      <div class="content detail-table">
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="createTime"
              label="日期">
            <template v-slot:default="scope">
              <span>{{ formatDateTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="transfer"
              label="转化率">
            <template v-slot:default="scope">
              <span>{{ formatTransfer(scope.row.transfer) }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="enterCount"
              label="累计进入（人次）">
          </el-table-column>
          <el-table-column
              prop="reachCount"
              label="累计触达（人次）">
          </el-table-column>
        </el-table>
      </div>
      <div class="content table-pagination">
        <el-pagination
            v-model:currentPage="tableInfo.currentPage"
            v-model:page-size="tableInfo.showCount"
            :page-sizes="[10, 20, 30, 40, 50]"
            :small="false"
            :disabled="false"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableInfo.totalResult"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
// === echarts ===
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {LineChart} from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import {LabelLayout, UniversalTransition} from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {CanvasRenderer} from 'echarts/renderers';
// === echarts ===

import moment from "moment";

// 注册必须的组件
echarts.use([
  LineChart,
  CanvasRenderer,
  DatasetComponent,
  GridComponent,
  LabelLayout,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  TransformComponent,
  UniversalTransition,
]);

export default {
  name: 'ProcessDetailDrawer',
  props: {
    nodeData: Object,
    lineChartData: Object,
    tableData: Array,
    tableInfo: Object,
  },

  computed: {
    dialogData() {
      return this.nodeData.dialogData
    },

    enterData() {
      return this.lineChartData.enterData || []
    },

    reachData() {
      return this.lineChartData.reachData || []
    },

    tableDataList() {
      return this.lineChartData.dataList || []
    },

    xAxis() {
      return this.enterData.map(item => item.date)
    },

    enterDataValues() {
      return this.enterData.map(item => item.value)
    },

    reachDataValues() {
      return this.reachData.map(item => item.value)
    }
  },

  watch: {
    xAxis: {
      handler() {
        this.updateChart()
      },
      deep: true
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },

  methods: {
    initChart() {
      const chartDom = document.getElementById('line-graph');
      const chart = echarts.init(chartDom);
      const option = {
        tooltip: {
          show: true
        },
        legend: {
          show: true,
        },
        xAxis: {
          type: 'category',
        },
        yAxis: {
          type: 'value'
        },
      };

      chart.setOption(option);
      this.chart = chart
    },

    updateChart() {
      this.chart.setOption({
        xAxis: {
          data: this.xAxis
        },
        series: [
          {
            name: '累计进入',
            type: 'line',
            data: this.enterDataValues
          },
          {
            name: '累计触达',
            type: 'line',
            data: this.reachDataValues
          }
        ],
      })
    },

    formatDateTime(createTime) {
      if (!createTime) {
        return '----'
      }

      return moment(createTime).format('YYYY-MM-DD')
    },

    formatTransfer(transfer) {
      return transfer + '%'
    },

    handleExport() {
      this.$emit('export')
    },

    handlePageChange(currentPage) {
      this.$emit('page-change', currentPage)
    },

    handleSizeChange(size) {
      this.$emit('size-change', size)
    }
  }
}
</script>

<style scoped lang="scss">
.node-drawer-wrapper {
  height: 100%;
  padding: 0 25px;
  min-width: 1000px;
  overflow: auto;
}

.drawer-block {
  .title-line {
    color: rgba(0, 0, 0, 0.85);
    margin: 0 0 25px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .content {
    margin: 0 0 25px;
  }

  .summary-info {
    background: rgba(249, 250, 255, 1);
    display: flex;
    height: 100px;

    > div {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      > div:nth-child(1) {
        font-size: 14px;
      }

      > div:nth-child(2) {
        font-size: 30px;
        margin-top: 6px;
      }
    }
  }

  .table-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

</style>
